<template>
  <!-- 市仓管理 -->

  <div class="sr-container" style="margin:20px">
    <el-button type="primary" @click="handleCreate">新增市仓</el-button>
    <!-- 各县仓仓储数量table -->
    <div>
      <el-card style="margin-top:15px">
        <el-table :data="dataList" border>
          <el-table-column label=" " align="center">
            <template slot-scope="scope">
              <span>{{ cityForm.menuName[scope.$index] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in citys"
            :key="item.label"
            :label="item.label"
            align="center"
          >
            <template slot="header">
              <span>{{ item.label }}</span>
              <el-tooltip effect="dark" placement="right">
                <div slot="content">
                  {{ item.name }}
                  <br />
                  {{ item.tel }}
                </div>
                <i class="el-icon-question" style="color:orange;margin-right:5px"></i>
              </el-tooltip>
            </template>
            <template slot-scope="scope2">
              <span>{{ scope2.row.ss[index] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 县仓的柱状表 -->
    <div style="margin-bottom:50px" v-for="(item,index) in echartsLength" :key="index">
      <el-card style="margin-top:20px">
        <BarChart :title="item.generalName" :storageDes="storageDes" :proLsit="item.list"></BarChart>
      </el-card>
    </div>
    <!-- 	<div v-for="(item,index) in houseList" :key="index">
	  <BarChart :title="item.countyName" :proLsit='item.list' :areacode='item.areacode'></BarChart>
    </div>-->

    <!-- 新增市仓 -->
    <el-dialog
      title="新增市仓"
      :visible.sync="cityStorageForm.isDialogVisible"
      width="50%"
      append-to-body
      :close-on-click-modal="false"
    >
      <div>
        <el-form label-width="110px" :model="cityStorageForm" ref="cityStorageForm">
          <el-form-item label="市仓地址：">
            <v-distpicker
              hide-area
              :province="cityStorageForm.province"
              :city="cityStorageForm.city"
              @selected="select"
            />
          </el-form-item>
          <el-form-item label="市仓经理：">
            <el-input v-model="cityStorageForm.name" placeholder="请输入大区经理姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系电话：">
            <el-input v-model="cityStorageForm.tel" placeholder="请输入联系人电话"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="submitCityStorage">提交</el-button>
      </div>
    </el-dialog>
    <!-- 市仓查看下辖县仓库存详情 -->
    <el-dialog
      title="县仓库存详情"
      :visible.sync="storageDesForm.isDesVisible"
      width="80%"
      append-to-body
      :close-on-click-modal="false"
    >
      <div>
        <span style="margin-left:10px">商品类型：</span>
        <el-select v-model="storageDesForm.goodType" placeholder="选择商品" clearable size="small">
          <el-option
            v-for="item in calendarTypeOptions"
            :key="item.key"
            :label="item.display_name"
            :value="item.key"
          ></el-option>
        </el-select>
        <span style="margin-left:10px">商品品牌：</span>
        <el-input
          v-model="storageDesForm.brand"
          placeholder="请输入商品品牌"
          size="small"
          class="fliter-item"
          style="width:130px"
          @keyup.enter.native="getStorageDesList"
        ></el-input>
        <span style="margin-left:10px">商品名称：</span>
        <el-input
          v-model="storageDesForm.goodName"
          placeholder="请输入商品名称"
          size="small"
          class="fliter-item"
          style="width:130px"
          @keyup.enter.native="getStorageDesList"
        ></el-input>
        <el-button
          size="small"
          style="margin-left:20px;"
          class="filter-item"
          type="success"
          icon="el-icon-search"
          @click="getStorageDesList"
        >查询</el-button>
        <!-- 县仓列表 -->
        <el-table
          :data="countyKucunList"
          style="width: 100%;margin-top:15px"
          tooltip-effect="dark"
          border
        >
          <el-table-column label="序号" min-width="50" align="center" type="index"></el-table-column>
          <el-table-column label="商品编码" align="center" prop="goodCode">
            <template slot-scope="scope">
              <span>{{ scope.row.proId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品" min-width="250px" align="center">
            <template slot-scope="scope">
              <div style="dispaly:table;margin:0 auto;height:100px;align-content: center">
                <el-image
                  style="width: 100px; height: 100px;margin-right:10px;float:left"
                  :src="scope.row.imageUrl"
                  fit
                  lazy
                ></el-image>
                <div>
                  <p align="left" style="margin-bottom:20px;">商品名称：{{ scope.row.infoName }}</p>
                  <p align="left" style="margin-bottom:0px;">商品型号：{{ scope.row.proType }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品类型" align="center" prop="goodType">
            <template slot-scope="scope">
              <span>{{ scope.row.proCatName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品品牌" align="center" prop="brand">
            <template slot-scope="scope">
              <span>{{ scope.row.goodsBrand }}</span>
            </template>
          </el-table-column>
          <el-table-column label="市场价" min-width="100px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.proMarketPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="销售价" min-width="100px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.proSellPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品状态" min-width="50px" align="center">
            <template slot-scope="{row}">
              <span>{{row.status=='1'?'上架': (row.status=='2'?'下架':'删除')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="库存" min-width="50px" align="center">
            <template slot-scope="{row}">
              <span>{{row.amount}}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="storageDesForm.total > 0"
          :total="storageDesForm.total"
          :page.sync="storageDesForm.pageNum"
          :limit.sync="storageDesForm.pageSize"
          @pagination="getStorageDesList"
        />
      </div>
    </el-dialog>
  </div>
</template>


<script>
import {
  addCityStorage,
  getCityStorage,
  getEchartList,
  getxiangqingList
} from "@/api/cityStorage";
import Pagination from "@/components/Pagination";
import BarChart from "./BarChart";
const calendarTypeOptions = [
  {
    key: "737717c9-eb23-11e9-af14-7cd30ac0ab94",
    display_name: "热水器"
  },
  {
    key: "24c306ee-b1a9-11e9-9cf4-105bad763570",
    display_name: "空调"
  }
];
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name;
  return acc;
}, {});
export default {
  props: ["messages"],
  components: {
    Pagination,
    BarChart
  },
  inject: ["reload"],
  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    }
  },
  data() {
    return {
      //新增市仓提交数据
      cityStorageForm: {
        //新增市仓弹窗控制
        isDialogVisible: false,
        //市仓地址
        address: [],
        //市仓经理
        name: "",
        //电话
        tel: "",
        //省
        province: "",
        //市
        city: "",
        provinceCode: "",
        cityCode: ""
      },
      //动态添加列
      citys: [],
      citysLabel: "",
      citysObj: {},
      calendarTypeOptions,
      countyKucunList: [],
      //县仓详情
      storageDesForm: {
        isDesVisible: false,
        total: 0,
        pageNum: 1,
        pageSize: 10,
        //县域名称
        countyName: "",
        //商品大类
        goodClass: "",
        //商品大类下小类
        goodType: "",
        //商品品牌
        brand: "",
        //商品名称
        goodName: ""
      },
      //仓库数量
      cityForm: {
        menuName: ["仓库总量", "空调", "热水器"]
      },
      //商品库
      dataList: [],
      cangkuTotal: [],
      cangkuTotalVal: "",
      proAmount: "",
      echartsLength: [],
      // myChart:null,
      // echartsItem:null,
      searchCode: "",
      everyCode: ""
    };
  },
  mounted() {
    this.getList();
    this.getEchart();
  },
  methods: {
    //提交新增市仓
    getList() {
      //顶部动态表格数据处理
      getCityStorage().then(res => {
        for (var j = 0; j < res.data.length; j++) {
          //仓库名称
          this.citysLabel = res.data[j].storageName;
          //仓库总量
          this.cangkuTotal.push(res.data[j].total);
          //列表头赋值
          this.citys.push(
            Object.assign({
              label: this.citysLabel,
              name: res.data[j].linkman,
              tel: res.data[j].phone
            })
          );
        }
        this.dataList = [];
        var data = res.data;
        for (var i = 0; i < this.cityForm.menuName.length; i++) {
          var name = this.cityForm.menuName[i];
          switch (name) {
            case "仓库总量":
              var list = [];
              for (var j = 0; j < data.length; j++) {
                var item = data[j];
                list.push(item.total);
              }
              this.dataList.push({
                ss: list
              });
              break;
            case "空调":
              var list = [];
              for (var m = 0; m < data.length; m++) {
                var kt = 0;
                var hasPush = false;
                for (var n = 0; n < data[m].list.length; n++) {
                  var item = data[m].list;
                  switch (item[n].catName) {
                    case "空调":
                      kt = item[n].proAmount;
                      hasPush = true;
                      list.push(kt);
                      break;
                    default:
                      break;
                  }
                }
                if (!hasPush) {
                  list.push(0);
                }
              }
              this.dataList.push(
                Object.assign({
                  ss: list
                })
              );
              break;
            case "热水器":
              var list = [];
              for (var m = 0; m < data.length; m++) {
                var rsq = 0;
                var hasPush = false;
                for (var n = 0; n < data[m].list.length; n++) {
                  var item = data[m].list;
                  switch (item[n].catName) {
                    case "热水器":
                      rsq = item[n].proAmount;
                      hasPush = true;
                      list.push(rsq);
                      break;
                    default:
                      break;
                  }
                }
                if (!hasPush) {
                  list.push(0);
                }
              }
              this.dataList.push(
                Object.assign({
                  ss: list
                })
              );
              break;
            default:
              break;
          }
        }
      });

      //各个市的柱状图列表
      // getCityStorageList().then(res => {
      //   console.log("=====柱状图数据====");
      // });
    },
    handleCreate() {
      this.cityStorageForm.isDialogVisible = true;
      // getssxCode().then(res=>{
      //   console.log(res)
      // })
    },
    submitCityStorage() {
      this.cityStorageForm.isDialogVisible = false;
      var params = {
        name: this.cityStorageForm.city,
        superAreaCode: this.cityStorageForm.provinceCode,
        areaCode: this.cityStorageForm.cityCode,
        linkman: this.cityStorageForm.name,
        phone: this.cityStorageForm.tel,
        amount: 0
      };
      addCityStorage(params).then(res => {
        if (res.code === "200") {
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            duration: 2000
          });
        } else {
          this.$notify({
            title: "失败",
            message: "失败，请联系管理员",
            type: "danger",
            duration: 2000
          });
        }
      });
      this.reload();
    },
    //点击柱状图柱子跳转到相应的县仓详情
    storageDes(code) {
      this.storageDesForm.isDesVisible = true;
      var params = {
        pageSize: this.storageDesForm.pageSize,
        pageNum: this.storageDesForm.pageNum,
        areaCode: code,
        catId: this.storageDesForm.goodType,
        goodsBrand: this.storageDesForm.brand,
        infoName: this.storageDesForm.goodName
      };
      getxiangqingList(params).then(res => {
        this.countyKucunList = res.content;
        this.storageDesForm.total = res.totalElements;
      });
    },
    select: function(data) {
      this.cityStorageForm.provinceCode = data.province.code + "000000";
      this.cityStorageForm.cityCode = data.city.code + "000000";
      this.cityStorageForm.province = data.province.value;
      this.cityStorageForm.city = data.city.value;
    },
    //获取县仓的商品列表
    getStorageDesList() {
      this.searchCode = sessionStorage.getItem("sbcode");
      this.storageDesForm.pageNum = 1;
      this.storageDes(this.searchCode);
    },
    getEchart() {
      getEchartList().then(res => {
        this.echartsLength = res.data;
      });
    }
    //创建柱状图
    // //自定义表头
    // renderHeader(h, { column, $index }) {
    //   return h("div", [
    //     h("span", column.label),
    //     h(
    //       "el-tooltip",
    //       {
    //         effect: "dark",
    //         content: "Right Top 提示文字",
    //         placement: "right"
    //       },
    //       [
    //         h("i", {
    //           class: "el-icon-question",
    //           style: "color:#FF6600;margin-left:5px;"
    //         })
    //       ]
    //     )
    //   ]);
    // }
  }
};
</script>
